@import "../../assets/scss/core/base";

$collapse-prefix: #{$jigsaw-prefix}-collapse;

.#{$collapse-prefix}-host {
    display: block;
}

.#{$collapse-prefix} {
    border: $border-width-base $border-style-base $border-color-base;
    border-bottom: none;
    border-radius: 4px;

    &-item {
        border-bottom: $border-width-base $border-style-base $border-color-base;
        &.#{$collapse-prefix}-item-inactive {
            > .#{$collapse-prefix}-header {
                .#{$collapse-prefix}-arrow {
                    @include prefixer(transform, rotate(90deg));
                }
            }
        }
    }

    &-item &-header {
        position: relative;
        height: 38px;
        line-height: 38px;
        cursor: pointer;
        color: $heading-color;
        padding-left: 16px;
        background: $background-color-base;
    }

    &-header &-arrow {
        position: absolute;
        right: 16px;
        top: 50%;
        margin-top: -7px;

        @include prefixer(transition, all .5s ease);
    }

    &-item &-content {
        overflow: hidden;
        color: rgba(0, 0, 0, .65);
        background-color: $default-color;
        @include prefixer(transition, height .3s ease);
        .#{$collapse-prefix}-padding {
            padding: 16px;
        }
    }
}

